<template>
    <div class="time_messagePage flex_column">
        <template v-if="userPackageInfo.level===0">
            <div class="flex_center align_center flex_column" style="width: 100%; height: 100%;">
                <img src="../../assets//lock.png" style="width: 150px; height: 150px;">
                <p style="padding-top: 15px; font-weight: 600;">升级套餐，即可解锁此功能体验</p>
                <div class="text_center margin20" style="width: 180px; height: 36px; background: #0147fd; border-radius: 4px; color: #fff; line-height: 36px; cursor: pointer;" @click="serviceDialog=true">联系客服，升级套餐</div>
            </div>
        </template>

        <template v-else>
            <div class="selectVue flex_between">
                <div class="flex align_center">  
                    <el-select v-model="currentWeChat.currentUserWechatName" placeholder="选择微信AI客服" style="width: 260px;" @change="handleChange">
                        <el-option v-for="item in weChatList" :key="item.id" :label="item.wechatName" :value="item"></el-option>
                    </el-select>
                </div>
                <div class="flex">
                    <div class="btn" @click="toBlack">群发黑名单管理</div>
                    <div class="btn" @click="toCreate">创建定时消息</div>
                </div> 
            </div>

            <!-- 定时消息列表 -->
            <div class="time_messageContent flex_1">
                <div class="thVue flex">
                    <div class="li flex_center align_center" style="width: 150px; line-height: 40px; font-weight: 600;">任务名</div>
                    <div class="li flex_center align_center" style="width: 100px; line-height: 40px; font-weight: 600;">发送类型</div>
                    <div class="li flex_center align_center" style="width: 150px; line-height: 40px; font-weight: 600;">创建者微信</div>
                    <div class="li flex_center align_center" style="width: 150px; line-height: 40px; font-weight: 600;">发送时间</div>
                    <div class="li flex_center align_center" style="flex: 1; line-height: 40px; font-weight: 600;">发送进度</div>
                    <div class="li flex_center align_center" style="width: 100px; line-height: 40px; font-weight: 600;">消息内容</div>
                    <div class="li flex_center align_center" style="flex: 1; line-height: 40px; font-weight: 600;">回复</div>
                    <div class="li flex_center align_center" style="width: 100px; line-height: 40px; font-weight: 600;">状态</div>
                    <div class="li flex_center align_center" style="width: 260px;; line-height: 40px; font-weight: 600;">操作</div>
                </div>
                <div class="tdContent relative">
                    <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                        <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                        <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                    </div>
                    <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                        <div class="li line-1" style="width: 150px; line-height: 50px; text-align: center; font-size: 12px; padding: 0 10px;" :title="item.name">{{item.name}}</div>              
                        <div class="li flex_center align_center line-1" style="width: 100px; line-height: 50px; text-align: center; font-size: 12px; padding: 0 10px;" :title="item.cycle">{{ ["", "一次","每天","周循环","立即发送"][item.type] }}</div>
                        <div class="li flex_center align_center line-1" style="width: 150px; line-height: 50px; text-align: center; font-size: 12px; padding: 0 10px;" :title="item.wechatName">{{ item.wechatName }}</div>
                        <div class="li flex_center align_center line-1" style="width: 150px; line-height: 50px; text-align: center; font-size: 12px; padding: 0 10px;">{{ item.nextSendTime }}</div>

                        <div class="li flex_column flex_center align_center" style="flex: 1; padding: 0 10px;">
                            <div style="font-size: 12px; padding: 3px 0;"  class=" line-1">发送进度: {{ item.success + item.fail || 0 }}/{{ item.count || 0 }}</div> 
                            <div style="font-size: 12px; padding: 3px 0;"  class=" line-1">发送失败: {{ item.fail || 0 }}</div> 
                        </div>
                        <div class="li flex_center align_center hover" style="width: 100px; line-height: 50px; text-align: center; font-size: 12px; padding: 0 10px; color: #0147fd; cursor: pointer;" @click="showMsg(item)">查看消息</div>
                        <div class="li flex_column flex_center align_center" style="flex: 1; padding: 0 10px;">
                            <div style="font-size: 12px; padding: 3px 0;" class=" line-1">回复：{{ item.reply || 0 }}</div> 
                            <div style="font-size: 12px; padding: 3px 0;" class=" line-1">回复率：{{ item.replyPercent || 0 }}</div> 
                        </div>
                        <div class="li flex_center align_center" style="width: 100px; line-height: 50px; text-align: center; font-size: 12px; padding: 0 10px;"  :style="{color: ['', '', '', '', '', '', '#d81e06', '#67C23A'][item.status]}">{{ ["未执行", "未执行", "未执行", "未执行", "未执行", "发送中", "暂停中", "已完成"][item.status] }}</div>
                        <div class="li flex_center align_center" style="width: 260px;; line-height: 50px; text-align: center; font-size: 12px; padding: 0 10px;">
                            <div class="btnVue" @click="handleTask(item)">任务管理</div>
                            <div class="btnVue" @click="handleDelete(item)">删除</div>
                            <div class="btnVue" @click="handleCopy(item)">复制</div>
                            <div class="btnVue" v-if="item.status<=5" @click="stopFun(item.id)">暂停发送</div>
                            <div class="btnVue" v-if="item.status===6" @click="reSend(item.id)">继续发送</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="paginationVue flex_center align_center">
                <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </template>

        <editVue :dialogTableVisible="editDialog" @beforeClose="editDialog=false" :id="id" ref="editRef"></editVue>
        <addVue :dialogTableVisible="addDialog" @beforeClose="addDialog=false" @callback="callback" @getList="getList"></addVue>
        <blackVue :dialogTableVisible="blackDialog" @beforeClose="blackDialog=false" ref="blackRef"></blackVue>
        <copyVue :dialogTableVisible="copyDialog" @beforeClose="copyDialog=false" :taskName="taskName" ref="copyRef" @callback="getList" @getList="getList"></copyVue>
        <msgListVue :dialogTableVisible="msgDialog" @beforeClose="msgDialog=false" :taskName="taskName" :msgList="msgList"></msgListVue>
        <serviceVue :dialogTableVisible10="serviceDialog" @beforeClose="serviceDialog=false"></serviceVue>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import vView from '@/components/vView.vue'
import editVue from "./components/edit.vue"
import addVue from "./components/add.vue"  
import blackVue from './components/black.vue';
import { toast } from '@/common/tools';
import copyVue from "./components/copy.vue"
import msgListVue from './components/msgList.vue';
import serviceVue from '@/components/service.vue';
export default {
    components: {
        vView,
        editVue,
        addVue,
        blackVue,
        copyVue,
        msgListVue,
        serviceVue
    },
    data(){
        return {
            list: [],
            total: 0,
            editDialog: false,
            addDialog: false,
            blackDialog: false,
            friendsDialog: false,
            taskDialog: false,
            copyDialog: false,
            msgDialog: false,
            serviceDialog: false,
            id: "",
            imgUrl: "",
            pageNum: 1,
            pageSize: 20,
            taskName: "",
            msgList: [],
            isEmpty: false,
            oprationId: ""
        }
    },
    mounted(){
        setTimeout(()=>{
            this.getList()
        }, 1000) 
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat,
            weChatList: state=> state.weChatList,
            userPackageInfo: state=> state.userPackageInfo
        })
    },
    methods: {
        // 管理定时消息
        handleManage(item){
            this.editDialog = true
            this.id = item.id
            this.$refs.editRef.getDetail()
        },

        // 创建定时消息弹框
        toCreate(){
            if(this.currentWeChat.currentOnLineStatus===0) return toast(1, "请先扫码登录微信")
            this.addDialog = true
        },

        // 查看消息
        showMsg(item){
            this.msgList = item.contentList
            this.taskName = item.name
            this.msgDialog = true
        },

        callback(){
            this.addDialog = false
            this.createDialog = true
            this.$refs.createRef.getList()
            this.$refs.createRef.getRepeatTypeList()
            this.$refs.createRef.getCategoryList()
            this.$refs.createRef.getAllFriend()
        },

        // 黑名单管理弹框
        toBlack(){
            this.blackDialog = true
            this.$refs.blackRef.getList()
            this.$refs.blackRef.getCategoryList()
        },

        back(){
            this.friendsDialog = false
            this.recordDialog = true
        },

        // 任务管理
        handleTask(item){
            this.$router.push({name: "task", query: {id: item.id}})
        },

        // 复制
        handleCopy(item){
            console.log(item)
            this.taskName = item.name
            this.copyDialog = true
            this.$refs.copyRef.getList(item.id, item.contentList, item.type, item.timing)
        },

        // 获取定时消息列表
        getList(){
            this.$post("/front/timing/selectList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                id: this.$store.state.currentWeChat.currentWeChatId,
                wechatName: this.$store.state.currentWeChat.currentUserWechatName
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                    this.isEmpty = this.total===0
                }
            })
        },

        // 暂停发送
        stopFun(id){
            
            if(this.oprationId===id) return
            this.oprationId = id
            this.$post("/front/timing/suspend", {
                id: id
            }).then(res=>{
                this.oprationId = ""
                if(res.data.code===0) {
                    toast(0, "任务已暂停")
                    this.getList()
                }else{
                    toast(1,res.data.msg)
                }
            })
        },

        reSend(id){
            console.log(this.currentWeChat.currentOnLineStatus)
            if(this.currentWeChat.currentOnLineStatus==0) return toast(1, "请先扫码登录微信")
            if(this.oprationId===id) return
            this.oprationId = id
            this.$post("/front/timing/resume", {
                id: id
            }).then(res=>{
                this.oprationId = ""
                if(res.data.code===0) {
                    toast(0, "任务已开始")
                    this.getList()
                }else{
                    toast(1,res.data.msg)
                }
            })
        },

        handleChange(e){
            console.log(e)
            let obj = this.currentWeChat
            obj.currentWeChatId = e.id
            obj.currentUserWechatName = e.wechatName
            obj.currentOnLineStatus = e.status
            this.$store.state.currentWeChat = obj
            window.sessionStorage.setItem("currentWeChatId", e.id)
            window.sessionStorage.setItem("currentUserWechatName", e.wechatName)
            window.sessionStorage.setItem("currentOnLineStatus", e.status)
            this.getList()
        },

        // 删除定时消息
        handleDelete(item){
            console.log(item)
            this.$alert(`确认删除该定时消息?`, '删除定时消息', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        this.$post("/front/timing/delete", {
                            id: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功") 
                                this.pageNum = 1
                                this.getList()
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        }, 
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.center-table td), 
:deep(.center-table th) {
    text-align: center !important;
    height: 85px !important;
}
:deep(.center-table th) {
    background: #f5f5f5 !important;
    height: 48px !important;
}
:deep(.el-table .cell) {
    font-size: 13px !important;
}
:deep(.el-button--delete) {
    width: 70%;
    background: #d81e06;
    margin-left: 0;
    margin-top: 8px;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--manage) {
    background: #0147fd;
    width: 70%;
    
    span {
        color: #fff !important;
    }
}
:deep(.el-button--state) {
    background: #AAA;
    width: 70%;
    margin-top: 8px;
    margin-left: 0;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--copy) {
    background: #1296db;
    width: 70%;
    margin-top: 8px;
    margin-left: 0;
    span {
        color: #fff !important;
    }
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #0147fd;
    background: #0147fd;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #0147fd;
}
.time_messagePage {
    width: 100%;
    height: 100%;
    padding: 15px 15px 0;
    .selectVue {
        width: 100%;
        height: 40px;
        .btn {
            width: 120px;
            height: 40px;
            background: #0147fd;
            border-radius: 4px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 13px;
            cursor: pointer;
            margin-left: 10px;
        }
    }
    .time_messageContent {
        width: 100%;
        height: calc(100% - 90px);
        margin-top: 10px;
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(100% - 40px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #f5f5f5;
                .hover:hover {
                    text-decoration: underline;
                }
                .btnVue {
                    width: 60px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    font-size: 11px;
                    color: #fff;
                    border-radius: 4px;
                    cursor: pointer;
                    margin: 0 2px;
                }
                .btnVue:nth-child(1) {
                    background: #0147fd;
                }
                .btnVue:nth-child(2) {
                    background: #d81e06;
                }
                .btnVue:nth-child(3) {
                    background: #67C23A;
                }
                .btnVue:nth-child(4) {
                    background: #AAA;
                }
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .paginationVue {
        width: 100%;
        height: 50px;
    }
}

</style>